<template>
  <view class="container">
    <view class="container-wrap">
      <view class="title">集运车辆时况</view>
      <view class="content-wrap">
        <view v-for="vehicle in vehicleStatistics" :key="vehicle.name">
          <view>{{ vehicle.name }}</view>
          <view>{{ vehicle.value }}</view>
        </view>
      </view>
    </view>
    <view class="echarts-item">
      <quantityWave v-if="isShow" :currentHeight="'100%'"></quantityWave>
    </view>
    <view class="echarts-item">
      <priceWave v-if="isShow" :currentHeight="'100%'"></priceWave>
    </view>
    <view class="table-item">
      <dealingPay v-if="isShow" :currentHeight="'100%'"></dealingPay>
    </view>
    <view class="echarts-item">
      <efficiencyWave v-if="isShow" :currentHeight="'100%'"></efficiencyWave>
    </view>
    <view class="echarts-item">
      <orderProgress v-if="isShow" :currentHeight="'100%'"></orderProgress>
    </view>
    <view class="echarts-item">
      <roadLossAnalysis
        v-if="isShow"
        :currentHeight="'100%'"
      ></roadLossAnalysis>
    </view>
  </view>
</template>

<script>
import config from '@/config';
import priceWave from './priceWave.vue';
import dealingPay from './dealingPay.vue';
import quantityWave from './quantityWave.vue';
import orderProgress from './orderProgress.vue';
import efficiencyWave from './efficiencyWave.vue';
import roadLossAnalysis from './roadLossAnalysis.vue';
import { vehicleList } from './baseData.js';
import { getPurVehicleStatistics } from '@/api/dashboard';
export default {
  components: {
    priceWave,
    dealingPay,
    quantityWave,
    orderProgress,
    efficiencyWave,
    roadLossAnalysis
  },
  data() {
    return {
      time: null,
      isShow: false,
      vehicleStatistics: vehicleList
    };
  },
  computed: {
    placePath() {
      return config.baseImgUrl + '/up-place.png';
    }
  },
  onShow() {
    this.getPurVehicleStatisticsFn();
    this.reloadPage();
  },
  onHide() {
    this.time && clearInterval(this.time);
  },
  methods: {
    async getPurVehicleStatisticsFn() {
      const res = await getPurVehicleStatistics();
      if (res.code === 0) {
        const result = res.data || {};
        this.vehicleStatistics.value = vehicleList.map((e) => {
          e.value = result[e.name];
          return e;
        });
      }
    },
    reloadPage() {
      this.isShow = false;
      this.time = setTimeout(() => {
        this.isShow = true;
      }, 100);
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  padding: 16px 10px;
  .echarts-item {
    height: 320px;
    margin-bottom: 10px;
  }
  .table-item {
    height: 330px;
    margin-bottom: 10px;
  }
}
.container-wrap {
  padding: 15px 10px;
  background-color: #ffffff;
  border-radius: 8px;
  margin-bottom: 10px;
  .title {
    display: flex;
    font-size: 14px;
    color: #000000;
    font-weight: 600;
    padding-bottom: 11px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #e6e6e6;
  }
  .content-wrap {
    padding-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    > view {
      height: 78px;
      padding: 10px;
      background: linear-gradient(
        180deg,
        rgba(64, 158, 254, 0.04),
        rgba(64, 158, 254, 0.2) 100%
      );
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      :first-child {
        font-size: 14px;
        color: #666666;
      }
      :nth-child(2) {
        font-size: 24px;
        font-weight: 700;
        color: #333333;
      }
    }
  }
  .place-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
  }
}
</style>
